// 导入 路由相关组件库
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  useHistory,
} from 'react-router-dom';

export const App2 = () => {
  return (
    <Router>
      <Route path={'/'} component={Home} />
      <Switch>
        <Route path={'/first'} component={First} />
        <Route path={'/second'} component={Second} />
        <Route component={() => <div>404页面</div>} />
      </Switch>
    </Router>
  );
};

// 为什么后定义的 First 组件可以在 <Route path={'/first'} component={First} /> 中渲染
const First = () => '页面一组件';
const Second = () => '页面二组件';
const Home = (props) => {
  console.log('home组件', props);
  // const history = useHistory();
  // console.log(history);
  return (
    <div>
      {/* 声明式导航 */}
      <Link to={'/first'}>页面一</Link>
      {/* 编程式导航 */}
      {/* <Link to={'/second'}>页面二</Link> */}
      <button
        onClick={() => {
          // console.log('ssss', history);
          props.history.push('/second');
        }}
      >
        页面二
      </button>
    </div>
  );
};
